import React, { useLayoutEffect, useState } from "react";

// useLayoutEffect的功能和语法是和useEffect是一样的

/*
  useLayoutEffect 与 useEffect的区别：

  - `useEffect` 是异步执行的，而`useLayoutEffect`是同步执行的。
  - `useEffect` 的执行时机是浏览器完成渲染之后，而 `useLayoutEffect` 的执行时机是浏览器把内容真正渲染到界面之前

  官方推荐，一般情况下都使用useEffect
  只有当我们需要去修改一个dom的样式的时候，有的时候可能会出现页面的抖动或者闪烁，才需要使用useLayoutEffect
*/

const App = () => {
  // useLayoutEffect(() => {
  //   console.log(1111);
  // }, []);
  // useEffect(() => {
  //   console.log(2222);
  // }, []);

  const [length, setLength] = useState(200);

  useLayoutEffect(() => {
    setLength(500);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      <div style={{ width: length, height: 500, background: "red" }}></div>
    </>
  );
};

export default App;
